<template>
  <header id="header">
    <div class="city">合肥</div>
    <div class="search">
      <input type="text" placeholder="大家正在搜：瘦脸针">
    </div>
    <div class="message">
      <ul>
        <li>写日记</li>
        <li>问医生</li>
        <li>随便聊</li>
      </ul>
    </div>
  </header>
</template>

<script>
export default {
  name: 'Header',
  props: {
    msg: String
  }
}
</script>

<style scoped lang="scss">

  header#header {
    width: 100%;
    height: rem(90px);
    background: red;
    display: flex;
    justify-content: space-around;
    line-height: rem(90px);

    div.city {
      font-size: rem(28px);
      color: #f5f5f5;

      &:after {
        content: "";
        display: inline-block;
        width: rem(18px);
        height: rem(10px);
        background: url('/src/assets/images/header/arror.png') center no-repeat/100%;
        margin-left: rem(10px);
      }
    }
    div.search {
      width: rem(550px);
      height: rem(60px);
      border-radius: rem(30px);
      background: #f5f5f5;
      position: relative;
      margin: auto 0;

      &:before {
        content: "";
        display: inline-block;
        width: rem(33px);
        height: rem(33px);
        background: urL('/src/assets/images/header/search.png') center no-repeat/100%;
        position: absolute;
        left: rem(22px);
        top: rem(14px);
      }
      input[type=text] {
        font-size: rem(24px);
        line-height: rem(60px);
        width: rem(446px);
        height: rem(60px);
        position: absolute;
        top: 0;
        left: rem(64px);
        padding: 0 rem(5px);
        border: 0;
        background-color: transparent;
        outline: none;
      }
    }
    div.message {
      position: relative;

      &:before {
        content: "";
        display: block;
        width: rem(39px);
        height: rem(39px);
        background: url('/src/assets/images/header/message.png') center no-repeat/100%;
        margin-top: rem(28px);
      }
      ul  {
        width: rem(150px);
        height: rem(162px);
        background: white;
        border-radius: rem(8px);
        z-index: 900;
        position: absolute;
        right: 0;
        bottom: rem(-154px);
        display: none;

        &:before {
          content: "";
          display: block;
          width: 0;
          height: 0;
          border: rem(6px) solid transparent;
          border-bottom: rem(9px) solid white;
          position: absolute;
          top: rem(-14px);
          right: rem(15px);
        }
        li {
          height: rem(53px);
          line-height: rem(53px);
          font-size: rem(24px);
          color: #333;
          border-bottom: 1px solid #eee;

          &:before {
            content: "";
            display: inline-block;
            width: rem(33px);
            height: rem(36px);
            vertical-align: text-bottom;
            margin-right: rem(6px);
          }
          &:nth-child(1) {
            &:before {
              background: url('/src/assets/images/header/message_diary.png') center no-repeat/95%;
            }
          }
          &:nth-child(2) {
            &:before {
              background: url('/src/assets/images/header/message_consult.png') center no-repeat/95%;
            }
          }
          &:nth-child(3) {
            border-bottom: none;
            &:before {
              background: url('/src/assets/images/header/message_contact.png') center no-repeat/95%;
            }
          }
        }
      }
    }
  }
</style>
